<script setup>
import  useMenuStore  from '../store/modules/menu';

const menuStore =useMenuStore ();


const handleClick=(command)=>{
    if(command==="cancel"){
        localStorage.removeItem('pz_token')
        window.location.href=window.location.origin
    }
}

</script>

<template>
    <div class="header-container">
        <div class="header-left">
            <el-icon :size="20" @click="menuStore.toggleCollapse" style='margin-left:20px'>
                <Expand />
            </el-icon>
            <el-tag size="small" style="margin-left: 20px; height: 100%;"  type="info" >
                面包屑
            </el-tag>

        </div>
        <div class="header-right">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small" />
            <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">
                    <span>admin</span>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>

<style lang="less" scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-color: #fff;
 

    .header-left {
        display: flex;
        align-items: center;
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        // .el-tag{

        // }
    }

    .header-right{
        display: flex;
        align-items: center;
        margin-right:20px
    }
}
</style>